<script>

import { deleteTime, ediTor, timeAdd, timest } from '@/api/system/api'

export default {
  name: 'index',
  data() {
    return {
      centerDialogVisible: false,
      centerDiaVisible: false,
      value1: [
        new Date(2023, 9, 7, 8, 40),
        new Date(2023, 9, 7, 9, 40)
      ],
      timeValue: [
        new Date(2023, 9, 7, 8, 40),
        new Date(2023, 9, 7, 9, 40)
      ],
      tableData: [],
      start: '',
      end: '',
      id: '',
      state: '',
      time: ''
    }
  },
  created() {
    this.getTime()
    // this.addTime()
  },
  methods: {
    // handleClick(row) {

    // },
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    // 获取时间列表
    getTime() {
      timest().then(res => {

        this.tableData = res.rows
        this.tableData.forEach(item => {
          this.start = item.startTime
          this.end = item.endTime
          item.time = this.start + '-' + this.end
        })
      })
    },
    // 添加时间列表
    addTime() {

      // 添加开始的时间
      let timeFirst = this.value1[0].toLocaleTimeString()
      //   添加结束的时间
      let timeEnd = this.value1[1].toLocaleTimeString()

      timeAdd({ startTime: timeFirst, endTime: timeEnd }).then(res => {

        this.getTime()
      })
      this.centerDialogVisible = false
    },
    ediBtn(id) {
      this.centerDiaVisible = true
      this.id = id
    },
    //   编辑时间列表
    editors(times) {

      let startTime = times[0].toLocaleTimeString()
      let endTime = times[1].toLocaleTimeString()
      this.time = startTime.split(':').slice(0, 2).join(':') + '-' + endTime.split(':').slice(0, 2).join(':')
      ediTor({ id: this.id, state: this.state, startTime, endTime }).then(res => {

      })
    },
    editorTrue() {

      this.tableData.find(item => item.id == this.id).time = this.time
      this.centerDiaVisible = false
      this.getTime()
    },
    // 删除时调用的接口
    open(id) {

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteTime(id).then(res=>{

          // 删除之后立刻渲染列表
          timest().then(res => {

            this.tableData = res.rows
            this.tableData.forEach(item => {
              this.start = item.startTime
              this.end = item.endTime
              item.time = this.start + '-' + this.end
            })
          })
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  }

}
</script>

<template>
  <div class="app-main">
    <div class="el-row">
      <!--    添加时间按钮-->
      <el-button type="primary" @click="centerDialogVisible = true">添加</el-button>
    </div>
    <!--  添加时间的对话框-->
    <el-dialog
      title="添加时间段"
      :visible.sync="centerDialogVisible"
      width="50%"
      center
    >
    <span style="font-weight: 600;margin-right: 20px">
      选择时间段
    </span>
      <el-time-picker
        is-range
        v-model="value1"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围"
      >
      </el-time-picker>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addTime">确 定</el-button>
  </span>
    </el-dialog>
    <!--  时间表操作-->
    <div class="el-table">
      <el-table
        :data="tableData"
        border
        style="width: 1275px"
      >
        <el-table-column
          fixed
          prop="time"
          label="日期"
          width="639"
        >
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="638"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="ediBtn(scope.row.id)">编辑</el-button>
            <el-button
              @click="open([scope.row.id])"
              type="text"
              size="small"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--  编辑时间表对话框-->
    <el-dialog
      title="添加时间段"
      :visible.sync="centerDiaVisible"
      width="50%"
      center
    >
    <span style="font-weight: 600;margin-right: 20px">
      选择时间段
    </span>
      <el-time-picker
        is-range
        v-model="timeValue"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围"
        @change="editors"
      >
      </el-time-picker>
      <span slot="footer" class="dialog-footer">
    <el-button @click="centerDiaVisible = false">取 消</el-button>
    <el-button type="primary" @click="editorTrue">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.app-main {
  width: 100%;
  margin: 40px 20px;
  min-height: calc(100vh - 84px);

  .el-row {
    margin-bottom: 20px;
    box-sizing: border-box
  }

  .el-table {
    width: 100%;
    //max-width: 100%;
    background-color: #fff;
    font-size: 14px;
    color: #606266;
  margin: auto;
  }
}

::v-deep .cell {
  font-size: 14px;
  text-align: center;
}

.el-button {
  font-size: 14px;
}
</style>
